// 期待的Form组件使用方式:
// const formVal = {name:'dzp',age:24,love:'eat'}
// const formList = [
//     {
//       key: 'name',
//       label: '姓名',
//       component: 'Input'
//     },
//     {
//       key: 'age',
//       label: '年龄',
//       component: 'Input'
//     },
//     {
//       key: 'love',
//       label: '爱好',
//       component: 'Radio'
//     },
// ]
// <MyForm
//     config={formList}
//     value={formVal}
//     setValue={setFormVal}
//     submit={submit}
//   >
// </MyForm>
import React, { useEffect } from 'react'
import { Form, Input, Select, Radio, Switch } from 'antd'

const { TextArea } = Input

type formProps = {
  formRef: any
  config: Array<any> // 配置数组
  value: any
  initialValues?: any //表单初始数据
  setValue: (e: any) => void // 表单数据更新
  onFinish: (values: any) => void
} & Partial<{
  children: React.ReactNode
}>

const FormIndex = (props: formProps) => {
  const { formRef, config, value, initialValues, setValue, onFinish } = props
  // 获得form初始化数据
  useEffect(() => {
    formRef.current?.setFieldsValue(value)
  }, [value])

  // 根据配置数据=> 生产Form.Item
  const makeComp = (comp: string, list: Array<any>): React.ReactNode => {
    switch (comp) {
      case 'Input':
        return <Input></Input>
      case 'TextArea':
        return <TextArea></TextArea>
      case 'Select':
        return (
          <Select>
            {list.map(item => (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        )
      case 'Radio':
        return (
          <Radio.Group>
            {list.map(item => (
              <Radio key={item.value} value={item.value}>
                {item.label}
              </Radio>
            ))}
          </Radio.Group>
        )
      case 'Switch':
        return <Switch />
      default:
        return <Input />
    }
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log(errorInfo, 'errorInfo')
  }

  return (
    <Form
      ref={formRef}
      onValuesChange={e => setValue({ ...value, ...e })}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      style={{ maxWidth: 700 }}
      labelCol={{ span: 5 }}
      labelWrap
      initialValues={initialValues}
      autoComplete="off"
      layout="horizontal"
    >
      <>
        {config.length > 0 &&
          config.map((item: any) => {
            const { key, label, component, hidden, list, rules, visible } = item
            //visible字段存在代表该表单项需要依赖其他表单项进行展示或隐藏
            const isHasVisible = Object.keys(item).includes('visible')
            if (!isHasVisible || isHasVisible || visible)
              return (
                <Form.Item label={label} key={key} name={key} hidden={hidden} rules={rules}>
                  {makeComp(component, list)}
                </Form.Item>
              )
          })}
      </>
    </Form>
  )
}

export default FormIndex
